<template>
  <div class="item hospital-item">
    <div class="select-hospital">
      <em class="place-holder"
          :style="{color:hospitalId==''?'#f64665':'#888888' }">
        选择医院
      </em>
      <cube-select v-model="hospitalId"
                    :options="hospitalList"
                    title="请选择医院"
                    placeholder=""
                    @change="selectHospital()">
      </cube-select>
      <div class="select-name" v-if="hospitalName">{{hospitalName}}</div>
      <Icon type="ios-arrow-right"
            class="select-icon"></Icon>  
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import  api from '../../assets/js/api'
export default {
  data () {
    //命名好纠结 为啥又有下划线，又有驼峰
    return {
      hospitalId: "",
      hospitalList: [],
      //默认的医院名称
      hospitalName:"",
    };
  },
  props: ["hospital_id"],
  methods: {

    getHospitalList () {
      this.hospitalId = "";
      let list = JSON.parse(localStorage.hospital_list);
      if (list.length > 0) {
        list.forEach(element => {
          element.text = element.name;
          element.value = element.id;
        });
        this.hospitalList = list;
        console.log(list);
      }
    },
    //医院选择
    selectHospital () {
      this.hospitalName = "";
      //向父组件传递值
      this.$emit('selectHospital', this.hospitalId);
    },
  },

  activated () {
    this.getHospitalList();
  },
  mounted () {
    this.axios.defaults.baseURL = api
    console.log("父组件传递的值",this.hospital_id)
    this.getHospitalList();
    if (this.hospital_id) {
      this.hospitalId = this.hospital_id;

      //遍历 选中默认的下拉框
      let list = this.hospitalList;
      list.forEach(element => {
        if (element.value == this.hospitalId) {
          this.hospitalName = element.text;
        }
      })
    }
  }

}

</script>

<style lang="less" scoped>

.hospital-item{

  width: 100%;
  padding-top: 44px;
  position: relative;

  .select-hospital {
    position: relative;
    height: 44px;
    line-height: 44px;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    .cube-select {
      margin-top: 2px;
      text-align: right;
      padding-right: 30px;
      font-size: 14px;
      color: #f64665;
      &::after {
        border: none;
      }
      z-index: 99;
      // opacity:0.5;
      background-color: rgba(255, 255, 255, 0.15);
    }
    .place-holder {
      font-size: 14px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
    }

    .select-name{
      position: absolute;
      top: 0px;
      right: 30px;
      color: #f64665;
      font-size: 14px;
      // z-index: 9;
    }
  }
}

.select-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  z-index: 10;
  color: #f64665;
}

</style>
